<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人信息</title>
    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/article.css">
    <link rel="stylesheet" href="css/mine.css">
</head>

<body>
    <!-- toast弹窗 -->
    <div class="toast_success">
        <span class="glyphicon glyphicon-ok-sign"></span>
        <p>操作成功！</p>
    </div>

    <div class="toast_error">
        <div class="glyphicon glyphicon-remove-sign"></div>
        <p>操作失败！</p>
    </div>
    <div id="mine">
        <div class="container" v-if="isShow">
            <div class="row">
                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                    <img :src="imgSrc" class="img-circle" alt="通用的占位符缩略图" width="200">
                </div>
                <div class="col-sm-offset-1 col-xs-9 col-sm-9 col-md-9 col-lg-9">
                    <div class="text">
                        <div class="page-header">
                            <h3>{{nickname}}</h3>
                            <span class="badge">Lv{{level}}</span>
                            <img src="img/sex.jpg" alt="">
                            <button type="button" @click="toggleIsShow" class="btn btn-default fr"><span
                                    class="glyphicon glyphicon-edit"></span>编辑个人信息</button>
                        </div>
                    </div>
                    <ul class="cable">
                        <li>
                            <span>0</span>
                            <i>动态</i>
                        </li>
                        <li>
                            <span>{{guanZhu}}</span>
                            <i>关注</i>
                        </li>
                        <li>
                            <span>0</span>
                            <i>粉丝</i>
                        </li>
                    </ul>
                    <p class="die">所在地区</p>
                    <p class="die">社交网络</p>
                    <p class="die">个人介绍：<span>暂无介绍</span></p>
                </div>
            </div>
            <div class="row">
                <h3 class="title">我创建的歌单
                    <button @click="goBack" type="button" class="btn btn-default pull-right">
                        <img src="img/return.png" alt="" width="18">
                        返回上一级</button>
                </h3>
                <div class="flex">
                    <div>
                        <img src="img/ranking.jpg" alt="">
                        <span class="current"></span>
                        <p>我的听歌排行榜</p>
                        <p>累计听歌3首页</p>
                    </div>
                    <div>
                        <img src="img/myLove.jpg" alt="">
                        <span class="current"></span>
                        <p>我喜欢的音乐</p>
                        <p>0首</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container" v-else>
            <h3 class="title">编辑个人信息
                <button @click="goBack" type="button" class="btn btn-default pull-right">
                    <img src="img/return.png" alt="" width="18">
                    返回上一级</button>
            </h3>
            <div class="row">
                <div class="col-xs-6 col-sm-6">
                    <form class="form-horizontal" role="form" @submit="editProfile">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">昵称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="firstname" v-model="nickname"
                                    placeholder="请输入昵称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">介绍</label>
                            <div class="col-sm-10">
                                <textarea name="" id="" cols="30" rows="10" class="form-control" v-model="signature"
                                    placeholder="说点什么吧"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">性别</label>
                            <div class="radio col-sm-10">
                                <label for="unknown">
                                    <input type="radio" name="sex" id="unknown" value="0">保密
                                </label>
                                <label for="man">
                                    <input type="radio" name="sex" id="man" value="1">男
                                </label>
                                <label for="woman">
                                    <input type="radio" name="sex" id="woman" value="2">女
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="birthday" class="col-sm-2 control-label">生日</label>
                            <div class="col-sm-10">
                                <input type="date" name="" id="birthday" class="form-control" v-model="birthday"
                                    required="required" title="">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="input" class="col-sm-2 control-label">地区</label>
                            <div class="col-sm-10" data-toggle="distpicker">
                                <select name="" id="input" class="form-control dqSelect" required="required"
                                    data-province="湖北省">
                                    <option value=""></option>
                                </select>
                                <select name="" id="input" class="form-control dqSelect" required="required"
                                    data-city="武汉市">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-danger">保存</button>
                                <button type="button" @click="toggleIsShow" class="btn btn-default">取消</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 right">
                    <img :src="imgSrc" alt="" id="headPortrait">
                    <button type="button" @click="uploadHeadImg" class="btn btn-default" id="btn">修改头像</button>
                    <input type="file" name="file" id="inputFile" v-show="false">

                </div>

            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="js/api.js"></script>

    <!-- <script src="js/public.js"></script> -->
    <script>
        $(() => {
            $('#target').distpicker({
                province: '湖北省',
                city: '武汉市',
            });
        })
    </script>
    <script>


        // 检测是否登陆
        axios({
            url: '/login/status'
        }).then((result) => {
            // console.log(result.data);
            let { code } = result.data
            if (code == 200) {
                throw new Error('请登录后查看')
            }
        })

        const mine = new Vue({
            el: '#mine',
            data: {
                // 查看个人信息和修改个人信息之间的切换
                isShow: false,
                // 头像
                imgSrc: '',
                // 昵称
                nickname: '',
                // 等级
                level: '',
                // 关注数量
                guanZhu: '',
                // userId
                userId: 0,
                // 性别
                gender: 1,
                //生日
                birthday: null,
                // 省份
                province: null,
                // 城市
                city: null,
                // 用户签名
                signature: null,
            },
            methods: {
                // 返回上一级
                goBack() {
                    history.go(-1)
                },
                toggleIsShow() {
                    this.isShow = !this.isShow;
                },
                // 更新头像
                // /avatar/upload
                uploadHeadImg() {
                    $(function (e) {
                        $("#btn").click(function () {
                            $("#inputFile").trigger("click");
                            $("#inputFile").change(function (e) {

                                var file = this.files[0]; //获取File对象
                                if (!file.type.includes('image')) {
                                    getEl.toast_error('请上传图片！');
                                    return false;
                                }
                                //创建读取文件的对象
                                let reader = new FileReader();
                                //创建文件读取相关的变量
                                var imgFile;
                                //正式读取文件
                                reader.readAsDataURL(file);
                                //为文件读取成功设置事件
                                var str = '';
                                reader.onload = function (e) {
                                    imgFile = e.target.result;
                                    this.imgSrc = imgFile
                                    $('#headPortrait').attr('src', imgFile);
                                    // console.log(imgFile);
                                    getEl.toast_success('图片上传成功！');
                                    const formdata = new FormData();
                                    formdata.append('imgFile', imgFile)
                                    axios({
                                        method: 'post',
                                        headers: {
                                            'Content-Type': 'multipart/form-data ',
                                        },
                                        url: '/avatar/upload',
                                        formdata
                                    }).then(res => {
                                        console.log(res);
                                    }).catch(err => {
                                        console.log(err);
                                    });
                                    // axios({
                                    //     url: '/countries/code/list'
                                    // }).then(res => {
                                    //     console.log(res);
                                    // })
                                };
                            })

                        });
                    });
                },
                editProfile(e) {
                    e.preventDefault();
                    const formdata = new FormData();
                    let gender, birthday, nickname, province, city, signature;
                    let radio = document.getElementsByName('sex');
                    for (let i = 0; i < radio.length; i++) {
                        console.log(radio[i]);
                        if (radio[i].getAttribute('checked')) {
                            gender = Number(radio[i].value)
                        }
                    };
                    birthday = Date.parse(this.birthday);
                    nickname = this.nickname;
                    signature = this.signature;

                    province = this.province;
                    city = this.city
                    formdata.append('gender', gender)// 0:保密 1:男性 2:女性
                    formdata.append('birthday', birthday)//出生日期,时间戳 unix timestamp
                    formdata.append('nickname', nickname)//用户昵称
                    formdata.append('province', province)//省份id
                    formdata.append('city', city)//省份id
                    formdata.append('signature', signature)//用户签名
                    console.log(gender, birthday, nickname, province, city, signature);
                    if (true) {
                        axios.post('/user/update', formdata).then(res => {
                            console.log(res);

                        });
                        getEl.toast_success('保存成功！')
                        // axios({
                        //     url:'/user/update',
                        //     params:{
                        //         gender,
                        //         birthday,
                        //         nickname,
                        //         province,
                        //         city,
                        //         signature
                        //     }
                        // }).then(res=>{
                        //     console.log(res.data);
                        // })

                    }

                },
                // 生日时间戳
                formatDate(shijianchuo) {
                    function add0(m) {
                        return m < 10 ? '0' + m : m
                    }
                    var time = new Date(shijianchuo);
                    var y = time.getFullYear();
                    var m = time.getMonth() + 1;
                    var d = time.getDate();
                    var h = time.getHours();
                    var mm = time.getMinutes();
                    var s = time.getSeconds();
                    return y + '-' + add0(m) + '-' + add0(d);
                }
            },
            computed: {

            },
            created() {
                // 获取用户详情
                axios({
                    url: '/user/detail',
                    params: { uid: 2088157987 },
                }).then(res => {
                    console.log(res.data);
                    let {
                        bindings,
                        createDays,
                        createTime,
                        profile,
                        userPoint,
                        level,
                        listenSongs,
                        userPoint: {
                            userId
                        }
                        // userPoint.useId
                    } = res.data;
                    console.log(profile);
                    this.imgSrc = profile.avatarUrl;
                    this.nickname = profile.nickname;
                    this.level = level;
                    this.guanZhu = listenSongs;
                    this.userId = userId;
                    this.gender = profile.gender;
                    this.birthday = this.formatDate(profile.birthday);
                    console.log(this.birthday);
                    this.province = profile.province;
                    this.city = profile.city;
                    this.signature = profile.signature;
                    // 性别判断
                    switch (this.gender) {
                        case 0:
                            $('#unknown').attr('checked', true);
                            break;
                        case 1:
                            $('#man').attr('checked', true);
                            break;
                        default:
                            $('#woman').attr('checked', true);
                            break;
                    }

                    $('#birthday').change(function (e) {
                        console.log(this.value);

                        console.log(Date.parse(this.value));
                    })

                })
            },
        });

                // 获取用户绑定信息和获取用户等级
                // 接口调不了
        /*  axios({
             url: '/user/binding',
             params: { uid: 32953014 },
         }).then(res => {
             console.log('获取用户绑定信息');
             console.log(res.data);
         }) */
        /*  axios({
        url:'/user/level'
    }).then(res=>{
        console.log(res);
    }) */




    </script>
    <!-- 省市区三级联动框架 -->
    <script src="node_modules/distpicker/dist/distpicker.js"></script>
</body>

</html>